<template>
	<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="新增" width="600px"
		:model-value="visible" @close="onCancel">
		<template #footer>
			<el-button key="back" @click="() => onCancel()">取消</el-button>
			<el-button key="submit" type="primary" :loading="onSubmitLoading" @click="onFinish">提交</el-button>
		</template>

		<el-form :model="modelRef" :rules="rulesRef" ref="formRef" label-width="120px">
			<el-form-item label="父模块" prop="type">
					<el-tree-select v-model="modelRef.parentId" :data="list" :render-after-expand="false"
					check-strictly=true>

				</el-tree-select>
			</el-form-item>
			<el-form-item label="name" prop="name">
				<el-input v-model="modelRef.name" placeholder="请输入模块名称" />
			</el-form-item>
			<el-form-item label="path" prop="path">
				<el-input v-model="modelRef.path" placeholder="请输入模块路径" />
			</el-form-item>
			<el-form-item label="title" prop="title">
				<el-input v-model="modelRef.title" placeholder="请输入模块标题" />
			</el-form-item>
			<el-form-item label="redirect" prop="redirect">
				<el-input v-model="modelRef.redirect" placeholder="请输入模块重定向路径" />
			</el-form-item>

			<el-form-item label="图标[icon]" prop="icon">
				<el-input v-model="modelRef.icon" />
			</el-form-item>
			<el-form-item label="component" prop="component">
				<el-input v-model="modelRef.component" />
			</el-form-item>
			<el-form-item label="菜单显示" prop="hidden">
				<el-switch v-model="modelRef.hidden" active-text="不显示" inactive-text="显示" />
			</el-form-item>
			<el-form-item label="排序" prop="sn">
				<el-input v-model="modelRef.sn" type="number" />
			</el-form-item>
			<el-form-item label="页面按钮" prop="btns">
				<page-button :data="modelRef.btns" :setBtns="setBtns"></page-button>
			</el-form-item>


			<el-form-item label="模块说明" prop="description">
				<el-input v-model="modelRef.description" placeholder="请输入模块说明" />
			</el-form-item>
		</el-form>


	</el-dialog>
</template>
<script lang="ts">
	import PageButton from "./PageButton.vue";
	import {
		defineComponent,
		PropType,
		reactive,
		ref
	} from "vue";
	import {
		useI18n
	} from "vue-i18n";
	import {
		TableListItem,
		PageButtonItem
	} from "../data.d";
	import {
		ElForm,
		ElMessage
	} from "element-plus";

	interface CreateFormSetupData {
		modelRef: Omit < TableListItem, 'id' > ;
		rulesRef: any;
		formRef: typeof ElForm;
		resetFields: () => void;
		onFinish: () => Promise < void > ;
	}

	export default defineComponent({
		name: 'CreateForm',

		props: {
			list: {
				type: Array,
				required: true
			},
			visible: {
				type: Boolean,
				required: true
			},
			onCancel: {
				type: Function,
				required: true
			},
			onSubmitLoading: {
				type: Boolean,
				required: true
			},
			onSubmit: {
				type: Function as PropType < (values: Omit < TableListItem, 'id' > , resetFields: () => void) =>
					void > ,
				required: true
			}
		},
		components: {
			PageButton
		},
		methods: {
			setBtns(btns: PageButtonItem[]): void {
				this.modelRef.btns = JSON.stringify(btns);
			}
		},
		setup(props): CreateFormSetupData {

			const {
				t
			} = useI18n();

			// 表单值
			const modelRef = reactive < Omit < TableListItem,
				'id' >> ({
					redirect: '',
					hidden: true,
					icon: 'home',
					description: '',
					title: '',
					path: '',
					component: '',
					name: '',
					btns: '',
					sn: 0,
					parentId: 0
				});
			// 表单验证
			const rulesRef = reactive({
				name: [{
					required: true,
					validator: async (rule: any, value: string) => {
						if (value === '' || !value) {
							throw new Error('请输入名称');
						} else if (value.length > 40) {
							throw new Error('长度不能大于40个字');
						}
					}
				}, ],
				path: [{
					required: true,
					validator: async (rule: any, value: string) => {
						if (value === '' || !value) {
							throw new Error('请输入路径');
						}
					}
				}, ],
				title: [{
					required: true,
					validator: async (rule: any, value: string) => {
						if (value === '' || !value) {
							throw new Error('请输入页面标题');
						}
					}
				}, ],

			});
			// form
			const formRef = ref < typeof ElForm > ();
			// 重置
			const resetFields = () => {
				formRef.value && formRef.value.resetFields();
			}
			// 提交
			const onFinish = async () => {
				try {
					const valid: boolean = formRef.value ? await formRef.value.validate() : false;
					if (valid === true) {
						props.onSubmit(modelRef, resetFields);
					}
				} catch (error) {
					// console.log('error', error);
					ElMessage.warning(t('app.global.form.validatefields.catch'));
				}
			};


			return {
				modelRef,
				rulesRef,
				formRef: formRef as unknown as typeof ElForm,
				resetFields,
				onFinish,

			}

		},
	
	})
</script>
